@charset "utf-8";
/* Base Grid 960 - 12 col */
.one.column,
.one.columns { width: 60px;}
.two.columns { width: 140px;}
.three.columns { width: 220px;}
.four.columns { width: 300px;}
.five.columns { width: 380px;}
.six.columns { width: 460px;}
.seven.columns { width: 540px;}
.eight.columns { width: 620px;}
.nine.columns { width: 700px;}
.ten.columns { width: 780px;}
.eleven.columns { width: 860px;}
.twelve.columns { width: 940px;}
/* 
- Full HD
*/
@media only screen and (min-width: 1200px){	
	.row,
	section.container{ width: 1200px; }
	.one.column { width: 80px;}
	.two.columns { width: 180px;}
	.three.columns { width: 280px;}
	.four.columns { width: 380px;}
	.five.columns { width: 480px;}
	.six.columns { width: 580px;}
	.seven.columns { width: 680px;}
	.eight.columns { width: 780px;}
	.nine.columns { width: 880px;}
	.ten.columns { width: 980px;}
	.eleven.columns { width: 1080px;}
	.twelve.columns { width: 1180px;}
}
/* 
- Tablet (Portrait)
- Note: Design for a width of 768px 
*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.row,
	section.container{ width: 768px; }
	.column,
	.columns { margin-left: 10px; margin-right: 10px; }
	.one.column { width: 44px;}
	.two.columns { width: 108px;}
	.three.columns { width: 172px;}
	.four.columns { width: 236px;}
	.five.columns { width: 300px;}
	.six.columns { width: 364px;}
	.seven.columns { width: 428px;}
	.eight.columns { width: 492px;}
	.nine.columns { width: 556px;}
	.ten.columns { width: 620px;}
	.eleven.columns { width: 684px;}
	.twelve.columns { width: 748px;}
}
/* 
- Mobile (Portrait)
- Note: Design for a width of 320px 
*/
@media only screen and (max-width: 767px) {
	header.main {display:none;}
	footer.w {display:none;}
	header.main .lnk,
	section.container{ width: 300px; margin:0;}
	.columns,
    .column { margin: 0; }
	.one.column,
	.two.columns,
	.three.columns,
	.four.columns,
	.five.columns,
	.six.columns,
	.seven.columns,
	.eight.columns,
	.nine.columns,
	.ten.columns,
	.eleven.columns,
	.twelve.columns { width:300px; }
}
/* #
- Mobile (Landscape)
- Note: Design for a width of 480px 
*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	header.main .lnk,
	section.container{ width: 440px; margin:0 auto;}
	.columns,
    .column { margin: 0; }
	.one.column,
	.two.columns,
	.three.columns,
	.four.columns,
	.five.columns,
	.six.columns,
	.seven.columns,
	.eight.columns,
	.nine.columns,
	.ten.columns,
	.eleven.columns,
	.twelve.columns { width:420px; }
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.wrapper:after { content: "\0020"; display: block; hseven: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  	content: '\0020';
  	display: block;
  	overflow: hidden;
 	visibility: hidden;
  	width: 0;
  	hseven: 0; 
}
.row:after,
.clearfix:after {
  	clear: both; 
}
.row,
.clearfix {
	zoom: 1; 
}
/* You can also use a <br class="clear" /> to clear columns */
.clear {
	clear: both;
  	display: block;
  	overflow: hidden;
  	visibility: hidden;
  	width: 0;
  	hseven: 0;
}